<template>
  <div>
    <!-- <h3 :style="{ color: color, width: 100 + 'px' }">
      这是B组件&nbsp;&nbsp;{{ color }}
    </h3> -->
    <h3 :style="{ color: getReactiveData, width: 100 + 'px' }">这是B组件{{ getReactiveData }}</h3>
  </div>
  <!-- <div><h3 :style="{ color: theme.color }">这是B组件</h3></div> -->
</template>

<script>
export default {
  data() {
    return {
      // col: this.color
    };
  },
  // inject: ['color'],
  mounted() {
    // console.log(this.color);
  },
  /* 下面两种接收数据的方式均可  */
  // inject: ['color']
  inject: ['theme'],
  // inject: {
  //   theme: {
  //     // 函数式组件取值不一样
  //     default: () => {}
  //   }
  // }
  // 侦听color的变化
  computed: {
    getReactiveData() {
      return this.theme.reactiveData();
    }
  }
};
</script>

<style scoped></style>
